import Taro from '@tarojs/taro';
// import { getScreenInfo } from '@utils/screen';
import { getScreenInfo } from '@utils/screen';
import { View, Text, Image, Input } from '@tarojs/components';
import { BaseComponent } from '@common/components/base-component';
import { setGlobalData, getAppData } from '@utils/tools'
import React from 'react';
import Jump from '@utils/jump'
import './index.scss';
import avar from '../../assets/img/avatar.png'
import AppRoute from '@utils/route/index'

export interface StatusBarProps {
    translucent?: boolean;
    barStyle?: 'light-content' | 'dark-content';
    bgColor?: string;
}

export interface NavigationBarProps {
    /**
     * 中间标题
     */
    avatar?: any
    title?: string;
    // 字体颜色
    titleColor?: string;
    //顶部背景色
    barBackgroundColor?: string;
    // 是否有首页搜索框
    homeTitleSearchShow?: boolean;
    //是否显示返回按钮
    backPageShow?: boolean;
    //是否滚动大于100
    onPageScrollStatus?: number
    //input框是否可选择
    isDisabled?: boolean;
    //点击方法
    onSearchClickFunction?: Function;
    //是否显示占位高度
    inShowHeight?: boolean
    //是否搜索记录历史记录
    history?: boolean
    //搜索事件
    confirm?: Function
    //搜索文字
    searchValue?: string
    //返回方法
    onPageBackClick?: Function
    //一键清除消息
    onClearMessage?: Function | string
    //是否显示返回首页图标
    onBackHomeIcon?: boolean
    //输入框预览提示文字
    placeholder?: string
    //顶部切换显示
    titleTab?: Number
    //话题
    topicData?: any
    //是否认证
    mobileType?: any
    avatarImage?: any
}

export default class NavigationBar extends BaseComponent<NavigationBarProps> {
    static defaultProps = {
        titleBgColor: '#fff',
    };

    constructor(props) {
        super(props);
    }
    componentDidMount() { }

    onErrorTip = () => {
        let { title, homeTitleSearchShow } = this.props
        if (!!title && !!homeTitleSearchShow) {
            console.error('❌  NavigationBar Error：不可同时传递两个同类型元素')
            return true
        }
        return false

    }
    onBackPage = () => {
        // this.props.onPageBackClick && this.props.onPageBackClick
        if (!!this.props.onPageBackClick) {
            this.props.onPageBackClick()
        } else {
            Jump.back()
        }

    }
    onTitleSetTool() {
        let { title, titleColor, onPageScrollStatus = 0, barBackgroundColor } = this.props
        if (onPageScrollStatus > 100 && !!!barBackgroundColor) {
            return <View className='back-image blackBack' onClick={this.onBackPage}></View>
        }
        if (titleColor === 'white') return <View className='back-image whiteBack' onClick={this.onBackPage}></View>
        if (titleColor !== 'white') return <View className='back-image blackBack' onClick={this.onBackPage}></View>
    }
    onSearchClick = () => {
        this.props.onSearchClickFunction && this.props.onSearchClickFunction();

    }
    render() {
        const padIns = 14
        const { statusBarHeight = 0, navHeight, rightBtnPosition } = getScreenInfo();
        let { topicData, titleTab = 3, inShowHeight = true, title, titleColor, barBackgroundColor, backPageShow, homeTitleSearchShow, onPageScrollStatus = 0, isDisabled, searchValue, placeholder = '', mobileType, avatar, avatarImage } = this.props
        const leftWidth = homeTitleSearchShow ? getAppData()?.systemInfo.windowWidth - (rightBtnPosition.right + rightBtnPosition.right + rightBtnPosition.width) : getAppData()?.systemInfo.windowWidth
        if (this.onErrorTip()) return (<View></View>)
        let tabType = Taro.getStorageSync('tabType')
        if (tabType == 2) {

        }
        return (
            <>
                <View
                    className='component-navigation-bar'
                    style={{
                        minHeight: navHeight + 'px',
                    }}>
                    {/*  boxShadow: '0 2rpx 25rpx 10rpx rgb(245, 245, 245);' */}
                    <View style={{ height: statusBarHeight + 'px;', width: '100%', background: barBackgroundColor }} className={this.classNames(onPageScrollStatus > 100 ? 'set-defeat-color' : '')}></View>
                    <View style={{ height: navHeight - statusBarHeight + 'px;', width: '100%', background: barBackgroundColor, display: 'flex;' }} className={this.classNames(onPageScrollStatus > 100 ? 'set-defeat-color' : '')}>
                        <View className="left-top-bar-view" style={{ width: leftWidth + 'px;' }}>
                            {
                                backPageShow && this.onTitleSetTool()
                            }
                            {
                                this.props.onBackHomeIcon && <View className='inter-home' onClick={this.onBackPage}></View>
                            }

                            {!!title && <View className='bar-title' style={{ color: (onPageScrollStatus > 100 && !!!barBackgroundColor) ? '#000' : titleColor }}>{title} {this.props.onClearMessage && <View className="bar-title-clear" onClick={() => {
                                this.props.onClearMessage && this.props.onClearMessage()
                            }}></View>}</View>}
                            {homeTitleSearchShow &&
                                <>
                                    <View className='avatar' style={{ display: (avatar ? 'block' : 'none') }}>
                                        <Image src={avatar}></Image>
                                    </View>
                                    <View className='search-view' style={{ width: (backPageShow ? 464 + 'rpx;margin-left:8px;' : '') }} onClick={this.onSearchClick}>
                                        <View className='search-image'></View>
                                        <Input disabled={isDisabled} type="text" value={searchValue} confirmType="search" placeholder={placeholder} onConfirm={(event) => {
                                            this.props.confirm && this.props.confirm(event)
                                        }} placeholderStyle='color: #C4C4C4;font-size:12px' style='font-size:24rpx;' />
                                    </View>
                                </>

                            }
                        </View>
                        {
                            homeTitleSearchShow && <View style={{ width: rightBtnPosition.right + rightBtnPosition.right + rightBtnPosition.width + 'px', height: '100%' }}></View>
                        }
                    </View >
                    {/* {this.props.children} */}
                </View >
                {inShowHeight && <View style={{ height: (backPageShow ? padIns + navHeight + 'px' : navHeight + 'px'), background: (backPageShow ? '#fff' : '') }}></View>}
            </>

        );
    }
}
